import React, { Component } from 'react'

export default class App extends Component {
  state = {
    list: ['a', 'b', 'c', 'd']
  }
  render() {
    // 不要在jsx代码中使用 for 循环（foreach）
    // 可以把jsx代码存入到数组中，
    // 可以在jsx代码中使用 map 方法遍历数据
    return (
      <div>
        { 
          // 为了代码的严谨性，可以先判断数据再渲染
          // this.state.list && this.state.list.map((item, index) => {
          //   return <div key = { index }>{ item }</div>
          // })
          this.state.list && this.state.list.map((item, index) => (<div key = { index }>{ item }</div>))
        }
      </div>
    )
  }
}
